<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 1024导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#f97316',
                        dark: '#1e293b',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-image: linear-gradient(to right, #3b82f6, #10b981);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .team-social {
                transition: all 0.3s ease;
            }
            .team-social:hover {
                background-color: #3b82f6;
                color: white;
            }
            .faq-toggle.active i {
                transform: rotate(180deg);
            }
        }
    </style>
</head>

<body class="bg-gray-50 text-gray-800">
    <!-- 头部导航 -->
    <header class="bg-white shadow-sm py-3 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center">
                <a href="index.html" class="flex items-center">
                    <div
                        class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold text-xl">
                        1024</div>
                    <span class="ml-2 text-lg font-semibold">导航</span>
                </a>

                <nav class="hidden md:flex items-center space-x-6">
                    <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                    <a href="resources.html" class="text-gray-600 hover:text-primary transition-colors">资源分类</a>
                    <a href="tools.html" class="text-gray-600 hover:text-primary transition-colors">实用工具</a>
                    <a href="community.html" class="text-gray-600 hover:text-primary transition-colors">社区交流</a>
                    <a href="about.html" class="text-gray-600 hover:text-primary transition-colors">关于我们</a>
                </nav>

                <div class="flex items-center space-x-4">
                    <div class="relative hidden md:block">
                        <input type="text" placeholder="搜索..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/50 w-48 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <button
                        class="hidden md:block px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                        <i class="fa fa-user-plus mr-1"></i> 登录
                    </button>
                    <button class="md:hidden text-gray-600 text-xl">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="py-10 bg-gradient-to-b from-white to-gray-50 border-b border-gray-100">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4 text-gradient">联系我们</h1>
                <p class="text-gray-600">有任何问题或建议？请随时与我们取得联系，我们会尽快回复您</p>
            </div>
        </div>
    </section>

    <!-- 联系内容区 -->
    <section class="py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-6xl mx-auto">
                <!-- 关于导航 -->
                <div class="bg-white rounded-xl shadow-sm mb-10">
                    <div class="flex flex-wrap border-b border-gray-100">
                        <button
                            class="px-6 py-4 text-sm transition-colors border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                            网站介绍
                        </button>
                        <button
                            class="px-6 py-4 text-sm transition-colors border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                            团队成员
                        </button>
                        <button
                            class="px-6 py-4 text-sm transition-colors border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                            发展历程
                        </button>
                        <button
                            class="about-nav-active px-6 py-4 text-sm transition-colors border-b-2 border-primary text-primary font-medium">
                            联系方式
                        </button>
                        <button
                            class="px-6 py-4 text-sm transition-colors border-b-2 border-transparent text-gray-600 hover:text-gray-900">
                            加入我们
                        </button>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-10">
                    <!-- 联系信息 -->
                    <div class="lg:col-span-1 space-y-6">
                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                            <h3 class="text-lg font-bold mb-6 flex items-center">
                                <i class="fa fa-info-circle text-primary mr-2"></i> 联系方式
                            </h3>

                            <div class="space-y-4">
                                <div class="flex items-start">
                                    <div
                                        class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0">
                                        <i class="fa fa-envelope"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1">邮箱联系</h4>
                                        <p class="text-gray-600 text-sm mb-1">support@1024nav.com</p>
                                        <p class="text-gray-500 text-xs">工作日 9:00-18:00 内回复</p>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div
                                        class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0">
                                        <i class="fa fa-weixin"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1">微信公众号</h4>
                                        <p class="text-gray-600 text-sm">1024导航服务号</p>
                                        <div class="mt-2 bg-gray-100 p-2 inline-block rounded">
                                            <img src="https://picsum.photos/100/100" alt="微信公众号二维码" class="w-24 h-24">
                                        </div>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div
                                        class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0">
                                        <i class="fa fa-github"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1">GitHub</h4>
                                        <p class="text-gray-600 text-sm">github.com/1024nav</p>
                                        <p class="text-gray-500 text-xs">可以提交issue反馈问题</p>
                                    </div>
                                </div>

                                <div class="flex items-start">
                                    <div
                                        class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0">
                                        <i class="fa fa-map-marker"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1">办公地址</h4>
                                        <p class="text-gray-600 text-sm">北京市海淀区中关村科技园</p>
                                        <p class="text-gray-500 text-xs">来访前请提前联系</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                            <h3 class="text-lg font-bold mb-4 flex items-center">
                                <i class="fa fa-clock-o text-primary mr-2"></i> 工作时间
                            </h3>
                            <ul class="space-y-2 text-gray-600 text-sm">
                                <li class="flex justify-between">
                                    <span>周一至周五</span>
                                    <span>9:00 - 18:00</span>
                                </li>
                                <li class="flex justify-between">
                                    <span>周六</span>
                                    <span>10:00 - 16:00</span>
                                </li>
                                <li class="flex justify-between">
                                    <span>周日及法定节假日</span>
                                    <span>休息</span>
                                </li>
                            </ul>
                            <p class="mt-4 text-gray-500 text-xs bg-amber-50 p-3 rounded">
                                <i class="fa fa-lightbulb-o text-amber-500 mr-1"></i> 紧急问题会在24小时内回复，一般问题会在3个工作日内回复
                            </p>
                        </div>
                    </div>

                    <!-- 联系表单 -->
                    <div class="lg:col-span-2">
                        <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 card-hover">
                            <h3 class="text-lg font-bold mb-6">发送消息</h3>
                            <form id="contactForm" class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label for="contactName"
                                            class="block text-sm font-medium text-gray-700 mb-1">您的姓名 <span
                                                class="text-red-500">*</span></label>
                                        <input type="text" id="contactName" name="name" required
                                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
                                    </div>

                                    <div>
                                        <label for="contactEmail"
                                            class="block text-sm font-medium text-gray-700 mb-1">联系邮箱 <span
                                                class="text-red-500">*</span></label>
                                        <input type="email" id="contactEmail" name="email" required
                                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
                                    </div>
                                </div>

                                <div>
                                    <label for="contactSubject"
                                        class="block text-sm font-medium text-gray-700 mb-1">消息主题 <span
                                            class="text-red-500">*</span></label>
                                    <select id="contactSubject" name="subject" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
                                        <option value="">请选择主题</option>
                                        <option value="resource">资源相关</option>
                                        <option value="tool">工具使用</option>
                                        <option value="account">账号问题</option>
                                        <option value="cooperation">合作咨询</option>
                                        <option value="feedback">意见反馈</option>
                                        <option value="other">其他问题</option>
                                    </select>
                                </div>

                                <div>
                                    <label for="contactMessage"
                                        class="block text-sm font-medium text-gray-700 mb-1">消息内容 <span
                                            class="text-red-500">*</span></label>
                                    <textarea id="contactMessage" name="message" rows="6" required
                                        class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"></textarea>
                                    <p class="mt-1 text-xs text-gray-500">请详细描述您的问题或建议，以便我们更好地为您解决</p>
                                </div>

                                <div>
                                    <label class="flex items-center">
                                        <input type="checkbox" required
                                            class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                                        <span class="ml-2 text-sm text-gray-600">我已阅读并同意<a href="#"
                                                class="text-primary hover:underline">隐私政策</a></span>
                                    </label>
                                </div>

                                <div class="pt-2">
                                    <button type="submit"
                                        class="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors inline-flex items-center">
                                        <i class="fa fa-paper-plane mr-2"></i> 发送消息
                                    </button>
                                    <button type="reset"
                                        class="ml-3 px-6 py-3 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                                        重置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 常见问题 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-10">
                    <h3 class="text-lg font-bold mb-6 flex items-center">
                        <i class="fa fa-question-circle text-primary mr-2"></i> 常见问题
                    </h3>

                    <div class="space-y-4">
                        <div class="border border-gray-100 rounded-lg overflow-hidden">
                            <button
                                class="faq-toggle w-full flex justify-between items-center p-4 text-left focus:outline-none">
                                <span class="font-medium">多久能收到回复？</span>
                                <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                            </button>
                            <div class="faq-content hidden px-4 pb-4 text-gray-600">
                                <p>我们会在收到消息后的1-3个工作日内回复您的咨询。如果是紧急问题，请在消息中注明"紧急"，我们会优先处理。</p>
                            </div>
                        </div>

                        <div class="border border-gray-100 rounded-lg overflow-hidden">
                            <button
                                class="faq-toggle w-full flex justify-between items-center p-4 text-left focus:outline-none">
                                <span class="font-medium">如何反馈不良资源？</span>
                                <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                            </button>
                            <div class="faq-content hidden px-4 pb-4 text-gray-600">
                                <p>您可以在资源详情页点击"举报"按钮，或者通过本页面联系我们，提供资源链接和举报原因，我们会在24小时内审核处理。</p>
                            </div>
                        </div>

                        <div class="border border-gray-100 rounded-lg overflow-hidden">
                            <button
                                class="faq-toggle w-full flex justify-between items-center p-4 text-left focus:outline-none">
                                <span class="font-medium">可以申请合作吗？</span>
                                <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                            </button>
                            <div class="faq-content hidden px-4 pb-4 text-gray-600">
                                <p>当然可以。请在联系表单中选择"合作咨询"主题，并详细描述您的合作意向，我们会有专门的商务人员与您对接。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部区域 -->
    <footer class="bg-gray-800 text-gray-300 py-10 mt-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-semibold mb-4">1024导航</h3>
                    <p class="text-sm text-gray-400 mb-4">精选互联网优质资源，打造高效便捷的导航平台，助力你的工作与学习。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="resources.html" class="text-gray-400 hover:text-white transition-colors">资源分类</a>
                        </li>
                        <li><a href="tools.html" class="text-gray-400 hover:text-white transition-colors">实用工具</a></li>
                        <li><a href="community.html" class="text-gray-400 hover:text-white transition-colors">社区交流</a>
                        </li>
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">帮助支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资源提交</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">举报不良信息</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">法律信息</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">社区规范</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">免责声明</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 1024导航. 本站资源仅供学习交流使用，如有侵权请联系删除。</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop"
        class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部按钮功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }

            // 导航栏滚动效果
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3', 'shadow-sm');
            } else {
                header.classList.add('py-3', 'shadow-sm');
                header.classList.remove('py-2', 'shadow');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // FAQ 折叠功能
        const faqToggles = document.querySelectorAll('.faq-toggle');
        faqToggles.forEach(toggle => {
            toggle.addEventListener('click', () => {
                toggle.classList.toggle('active');
                const content = toggle.nextElementSibling;
                content.classList.toggle('hidden');
            });
        });

        // 表单提交处理
        const contactForm = document.getElementById('contactForm');
        if (contactForm) {
            contactForm.addEventListener('submit', (e) => {
                e.preventDefault();

                // 在实际应用中，这里会有表单验证和提交到服务器的逻辑
                const formData = new FormData(contactForm);
                const formValues = Object.fromEntries(formData.entries());

                // 模拟提交成功
                alert('您的消息已成功发送，我们会尽快回复您！');
                contactForm.reset();
            });
        }
    </script>
</body>

</html>